<template>
  <div class="background" style="position: relative">
    <a-tabs :default-active-key="activeKey"  size="large">
      <a-tab-pane v-for="(item, index) in tabOption" :key="item.key_value" :tab="item.key_name">
        <component ref="childComponentRef" :is="item.component"/>
      </a-tab-pane>
    </a-tabs>
    <div style="width: 550px; position: absolute;right: 30px; top: 10px">
      <a-row>
        <a-col :span="12">
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车间" prop="workshop">
            <j-dict-select-tag style="width: 200px" placeholder="请选择车间" v-model="selectQuery.workshop" dictCode="workshop"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="工序" prop="workingProcedure">
            <j-dict-select-tag style="width: 200px" placeholder="请选择工序" v-model="selectQuery.workingProcedure" dictCode="working_procedure"/>
          </a-form-model-item>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import Lunban from './Lunban.vue'
import Banzhi from './Banzhi.vue'
export default {
  provide() {
    return {
      selectQuery: this.selectQuery,
    };
  },
  components: { Lunban, Banzhi },
  data() {
    return {
      selectQuery: {
        workshop:null,
        shift:null,
        company:null,
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      tabOption: [
        { key_value: '1', key_name: '轮班管理', component: 'Lunban' },
        // { key_value: '2', key_name: '班制设置', component: 'Banzhi' },
      ],
      importVisible: false,
      activeKey:'1',
    }
  },
  mounted() {},
  methods: {

  }
}
</script>

<style>
.background {
  background-color: white;
  border-radius: 5px;
  box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.05);
}
</style>
